<template>
  <div class="home">
    <el-container>
      <el-header>
        <nav-bar />
      </el-header>
      
      <el-main>
        <!-- 轮播图 -->
        <el-carousel height="400px" class="banner">
          <el-carousel-item>
            <div class="banner-item" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
              <div class="banner-content">
                <h2>精选好书，尽在掌握</h2>
                <p>发现更多优质图书，开启阅读之旅</p>
                <el-button type="primary" size="large" @click="$router.push('/books')">
                  立即探索
                </el-button>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="banner-item" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
              <div class="banner-content">
                <h2>限时特惠</h2>
                <p>精选图书5折起，错过再等一年</p>
                <el-button type="danger" size="large">
                  查看详情
                </el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

        <!-- 热门图书 -->
        <section class="section">
          <div class="section-header">
            <h2>热门推荐</h2>
            <el-button text type="primary" @click="$router.push('/books')">
              查看更多 <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          
          <div class="book-grid">
            <book-card 
              v-for="book in hotBooks" 
              :key="book.id" 
              :book="book" 
              @click="$router.push(`/book/${book.id}`)"
            />
          </div>
        </section>

        <!-- 新书上架 -->
        <section class="section">
          <div class="section-header">
            <h2>新书上架</h2>
            <el-button text type="primary" @click="$router.push('/books')">
              查看更多 <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          
          <div class="book-grid">
            <book-card 
              v-for="book in newBooks" 
              :key="book.id" 
              :book="book" 
              @click="$router.push(`/book/${book.id}`)"
            />
          </div>
        </section>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import NavBar from '@/components/NavBar.vue'
import BookCard from '@/components/BookCard.vue'

const hotBooks = ref([
  {
    id: 1,
    title: '深入理解计算机系统',
    author: 'Randal E. Bryant',
    price: 139.00,
    cover: 'https://via.placeholder.com/200x300/667eea/ffffff?text=CSAPP',
    rating: 4.8
  },
  {
    id: 2,
    title: '算法导论',
    author: 'Thomas H. Cormen',
    price: 128.00,
    cover: 'https://via.placeholder.com/200x300/764ba2/ffffff?text=算法导论',
    rating: 4.9
  },
  {
    id: 3,
    title: 'JavaScript高级程序设计',
    author: 'Nicholas C. Zakas',
    price: 99.00,
    cover: 'https://via.placeholder.com/200x300/f093fb/ffffff?text=JS高级',
    rating: 4.7
  },
  {
    id: 4,
    title: 'Python编程：从入门到实践',
    author: 'Eric Matthes',
    price: 89.00,
    cover: 'https://via.placeholder.com/200x300/f5576c/ffffff?text=Python',
    rating: 4.6
  }
])

const newBooks = ref([
  {
    id: 5,
    title: 'Vue.js实战',
    author: '梁灏',
    price: 79.00,
    cover: 'https://via.placeholder.com/200x300/36d1dc/ffffff?text=Vue实战',
    rating: 4.5
  },
  {
    id: 6,
    title: 'Django企业开发实战',
    author: '董伟明',
    price: 108.00,
    cover: 'https://via.placeholder.com/200x300/5b86e5/ffffff?text=Django',
    rating: 4.7
  },
  {
    id: 7,
    title: '数据结构与算法分析',
    author: 'Mark Allen Weiss',
    price: 75.00,
    cover: 'https://via.placeholder.com/200x300/667eea/ffffff?text=数据结构',
    rating: 4.8
  },
  {
    id: 8,
    title: '设计模式之禅',
    author: '秦小波',
    price: 88.00,
    cover: 'https://via.placeholder.com/200x300/764ba2/ffffff?text=设计模式',
    rating: 4.6
  }
])
</script>

<style scoped>
.home {
  min-height: 100vh;
}

.banner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.banner-content {
  text-align: center;
}

.banner-content h2 {
  font-size: 36px;
  margin-bottom: 16px;
}

.banner-content p {
  font-size: 18px;
  margin-bottom: 24px;
}

.section {
  margin: 40px 0;
  padding: 0 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #333;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
</style>
